home *** CD-ROM | disk | FTP | other *** search
/ MacAddict 123 / MacAddict_123_2006_11.iso / Software / Internet & Communication / Sandvox 1.0.4.dmg / Sandvox.app / Contents / Designs / This Modern Life.svxDesign / main.css < prev    next >
Cascading Style Sheet File  |  2006-08-04  |  13KB  |  709 lines
  1. /* 
  2.    css Copyright (c) 2005-2006 by Karelia Software. All rights reserved.
  3.    css released under Creative Commons License 
  4.         - http://creativecommons.org/licenses/by-sa/2.5/ 
  5.    All associated graphics belong to their respective owners 
  6.         and are licensed separately. 
  7. */
  8.  
  9. a img { border: none; }
  10.  
  11.  /* General styles  */
  12.  
  13. .clear {
  14.     clear: both;
  15.     height: 0;
  16. }
  17.  
  18. .hidden {
  19.     display:none;
  20. }
  21.  
  22. /* Images embedded in text.  "narrow" are 200 pixels wide or smaller. */
  23. img.narrow {
  24.     display: block;
  25.      clear:right;
  26.     float: right;
  27. }
  28. img.wide {
  29.     display: block;
  30.      clear:both;
  31.     display: block;
  32. }
  33.  
  34. /* Block Level formatting, more or less in descending order */
  35.  
  36. html {
  37.     background: rgb(255, 179, 79) url(blue_bkgd.jpg);
  38. }
  39.  
  40. body {
  41.     font-size: 76%;
  42.     margin: 0;
  43.     background: url(extra_bkgd.jpg) center repeat-y;
  44.     font-family:Verdana, Helvetica, Arial, sans-serif;
  45.     word-wrap: break-word;
  46. }
  47.  
  48. /* special fonts for headings */
  49. h1, h2, h3, h4, #title p, #sitemenu-content li, #page-bottom p, .caption  {
  50.     font-family:"Gill Sans", Verdana, Helvetica, Arial, sans-serif;
  51. }
  52.  
  53.  
  54. #page-container {
  55.     background: url(footer_bkgd.jpg) center bottom no-repeat;
  56. }
  57.  
  58. #page {
  59.     margin: auto;
  60.     width: 740px;
  61.     background: white url(background.jpg) repeat-y;
  62. }
  63.  
  64. body.no-sidebar #page {
  65.     background: white url(background_no_sidebar.jpg) repeat-y;
  66. }
  67.  
  68. #page-top {
  69.     margin:0;
  70.     background: url(new_header_bkgd.jpg) no-repeat;
  71. }
  72.  
  73. #title {
  74.     /*Here we expand the title so we can
  75.     have the nice rounded top with drop shadow,
  76.     then use padding to move the content back */
  77.     padding-top: 15px;
  78.     padding-left: 15px;
  79.     padding-right: 15px;
  80. }
  81.  
  82. h1 {
  83.     font-size: 3.3em;
  84.     font-weight:normal;
  85.     text-align: right;
  86.     color: white;
  87.     margin: 22px 10px 15px 210px;
  88.     display: block;
  89.     text-shadow: 0px -1px 1px rgb(161, 161, 161);
  90.     width:470px;
  91. }
  92.  
  93. h1.replaced { 
  94.     background-position:top right;
  95.     text-align:left;
  96. }
  97.  
  98. h1.TurnOffReplace {
  99.     text-align:right!important;
  100.     font-size:1.5em;
  101. }
  102.  
  103. /* IE Hack */
  104.  
  105. /* Hides from IE5-mac \*/
  106. * html h1 {
  107.     height: 1%;
  108. }
  109. /* End hide from IE5-mac */
  110.  
  111. h1 a {
  112.     text-decoration:none;
  113.     color: white;
  114. }
  115.  
  116. h1 a:hover, h1 a:focus, h1 a:active {
  117.     border-bottom: 1px solid white;
  118. }
  119.  
  120. h1.replaced a, h1.replaced a:hover, h1.replaced a:focus, h1.replaced a:active {
  121.     border:0px none!important;
  122.     background:transparent !important;
  123.     padding:0px!important;
  124. }
  125.  
  126. #title img {
  127.     float: left;
  128.     margin: 3px;
  129.     margin-right: 10px;
  130.     margin-bottom: 6px;
  131. }
  132.  
  133. #title p {
  134.     font-size: 1.4em;
  135.     text-align: right;
  136.     margin: 10px 20px 14px 10px;
  137.     color: white;
  138.     text-shadow: 0px -1px 1px rgb(161, 161, 161);
  139. }
  140.  
  141. /* IE Hack */
  142.  
  143. /* Hides from IE5-mac \*/
  144. * html #title p {
  145.     height: 1%;
  146. }
  147. /* End hide from IE5-mac */
  148.  
  149. #sitemenu-container {
  150.     background: url(header_bottom.jpg) no-repeat;
  151.     clear: both;
  152.     padding:0px;
  153.     padding-top: 23px;
  154. }
  155.  
  156. #sitemenu {
  157.     background: url(sitemenu-top.jpeg) no-repeat top;
  158.     clear: both;
  159.     padding: 0px;
  160.     margin: 0px;
  161.      margin-top: -12px;
  162. }
  163.  
  164. #sitemenu-content ul {
  165.     background: url(sitemenu-bottom.jpeg) no-repeat bottom;
  166.     text-align: left;
  167.     padding: 6px 18px 20px 13px;
  168.     line-height: 1.5em;
  169.     width:709px;
  170. }
  171.  
  172. /* Hides from IE5-mac \*/
  173. * html #sitemenu-container {
  174.     padding-top:16px;
  175. }
  176.  
  177. * html #sitemenu {
  178.     margin:0px;
  179. }
  180.  
  181. * html #sitemenu-content ul {
  182.     margin:0px;
  183. }
  184. /* End hide from IE5-mac */
  185.  
  186. #sitemenu-content li {
  187.     margin: 0px;
  188.     padding: 0px 5px;
  189.     display: inline;
  190.     margin-top: 1px;
  191.     font-size: 1.1em;
  192. }
  193.  
  194. #sitemenu-content a{
  195.     text-decoration: none;
  196.     color: black;
  197.     text-shadow: 0px 1px 1px white;
  198.     padding: 2px;
  199. }
  200.  
  201. #sitemenu-content li.currentPage span.in {
  202.     color: white;
  203.     text-shadow: 0px -1px 1px rgb(161, 161, 161);
  204.     padding: 2px;
  205.     border-bottom: 1px solid rgb(199, 143, 72);
  206.     border-left: 1px solid rgb(191, 150, 97);
  207.     border-right: 1px solid rgb(191, 129, 52);
  208.     border-top: 1px solid rgb(161, 118, 62);
  209.     background: rgb(255, 166, 55) url(current_page_bkgd.jpg) no-repeat;
  210. }
  211.  
  212.  
  213. #sitemenu-content a:hover, #sitemenu-content a:focus, #sitemenu-content a:active {
  214.     border-bottom: 1px solid rgb(199, 143, 72);
  215.     border-left: 1px solid rgb(191, 150, 97);
  216.     border-right: 1px solid rgb(191, 129, 52);
  217.     border-top: 1px solid rgb(161, 118, 62);
  218.     padding: 1px;
  219.     background: rgb(255, 166, 55) url(current_page_bkgd.jpg) no-repeat;
  220.     color: white;
  221.     text-shadow: 0px -1px 1px rgb(161, 161, 161);
  222. }
  223.  
  224. #page-content {
  225.     width: 736px;
  226.     margin: auto;
  227.     clear: both;
  228.     min-height: 100px;
  229. }
  230.  
  231. body.no-sidebar #page-content {
  232.     width: 736px;
  233. }
  234.  
  235. #sidebar {
  236.     float: left;
  237.     width: 224px;
  238.     word-wrap: break-word;
  239.     font-size: 1em;
  240.     text-align: center;
  241. }
  242.  
  243. #sidebar p {
  244.     margin-left: 10px;
  245.     margin-right: 10px;
  246.     text-align: left;
  247. }
  248.  
  249. #sidebar ul, .callout ul {
  250.     text-align:left;
  251.     padding-left:36px;
  252.     padding-right:9px;
  253. }
  254.  
  255. /* improve spacing for IEs of various shapes and sizes */
  256. * html #sidebar ul, * html .callout ul {
  257.     text-align:left;
  258.     padding-left:10px;
  259. }
  260.  
  261. .pagelet {
  262.     width:224px;
  263.     word-wrap:break-word;
  264.     overflow:hidden;
  265.     margin-bottom:18px;
  266.     padding-top: 3px;
  267. }
  268.  
  269. .pagelet h4 {
  270.     padding-top:9px;
  271.     margin:0px 2px 0px 2px;
  272.     font-size: 1.2em;
  273.     font-weight: normal;
  274.     background: url(sidebar_button.jpg) 4px 0px no-repeat;
  275.     color: white;
  276.     text-shadow: 0px -1px 1px rgb(161, 161, 161);
  277.     text-align: right;
  278. }
  279.  
  280. .pagelet h4 span.in {
  281.     display:block;
  282.     padding:0px 13px 27px 13px;
  283.     background: url(sidebar_button_bottom.jpg) bottom no-repeat;
  284. }
  285.  
  286. .pagelet p {
  287.     margin-top:-5px;
  288. }
  289.  
  290. /* photo-page, html-page (in some cases), iframe-page don't have sidebar */
  291. body.no-sidebar #main {
  292.     margin-left: 10px;
  293.     margin-right: 10px;
  294.     font-size: 1em;
  295. }
  296.  
  297. /* Most other pages have sidebars */
  298. body.allow-sidebar #main {
  299.     margin-right: 10px;
  300.     float: right;
  301.     width: 491px;
  302.     font-size: 1em;
  303. }
  304.  
  305. /* IE Hack */
  306.  
  307. /* Hides from IE5-mac \*/
  308. * html .body.allow-sidebar #main {
  309.     margin:0;
  310.     padding:0;
  311.     padding-left:10px;
  312. }
  313. /* End hide from IE5-mac */
  314.  
  315. h2 {
  316.     display: block;
  317.     font-weight: normal;
  318.     font-size: 2em;
  319.     color: white;
  320.     text-align: right;
  321.     text-shadow: 0px -1px 1px rgb(161, 161, 161);
  322.     background: rgb(255, 166, 55) url(new_title_bkgd.jpg) top right;
  323.      padding:13px 15px;
  324.      margin:0px -3px 17px -3px;
  325.     border:1px solid;
  326.     border-bottom-color:rgb(199, 143, 72);
  327.     border-left-color:rgb(191, 150, 97);
  328.     border-right-color:rgb(191, 129, 52);
  329.     border-top-color:rgb(161, 118, 62);
  330. }
  331.  
  332. /* Hides from IE5-mac \*/
  333. * html h2 {
  334.     height: 28px;
  335. }
  336. /* End hide from IE5-mac */
  337. a {
  338.     color: black;
  339.     text-decoration: underline;
  340.     padding: 2px;
  341. }
  342.  
  343. a:hover, a:focus, a:active {
  344.     border-bottom: 1px solid rgb(199, 143, 72);
  345.     border-left: 1px solid rgb(191, 150, 97);
  346.     border-right: 1px solid rgb(191, 129, 52);
  347.     border-top: 1px solid rgb(161, 118, 62);
  348.     background: rgb(255, 166, 55) url(current_page_bkgd.jpg) no-repeat;
  349.     padding: 1px;
  350.     color: white;
  351.     text-decoration: none;
  352.     text-shadow: 0px -1px 1px rgb(161, 161, 161);
  353. }
  354.  
  355. a[href*='sandvox.com'] {
  356.     border:none;
  357.     background:transparent;
  358.     padding:0px;
  359. }
  360.  
  361.  
  362. li a {
  363.     text-decoration:none;
  364.     color:#c60;
  365. }
  366.  
  367.  
  368. #main ul {
  369.     list-style: disc;
  370. }
  371.  
  372. #main li {
  373.     list-style: disc;
  374.     text-align: left;
  375. }
  376.  
  377. #main li a {
  378.     color: black;
  379.     padding: 3px;
  380.     line-height: 1.7em;    
  381. }
  382.  
  383. #main li a:hover, #main li a:focus, #main li a:active {
  384.     color: rgb(255, 150, 0);
  385.     text-decoration: none;
  386.     border-bottom: 1px solid rgb(255, 150, 0);
  387.     color:white;
  388. }
  389.  
  390. .article {
  391.     margin-left: 0px;
  392.     margin-right: 0px;
  393.     margin-bottom: 10px;
  394. }
  395.  
  396. .article h3 {
  397.      background: url(other_title.jpg) repeat-x bottom;
  398.      border: 1px solid rgb(158, 158, 158);
  399.      color: black;
  400.      font-size: 1.5em;
  401.      font-weight: normal;
  402.      text-shadow: 0px 1px 1px white;
  403.      margin-left: -3px;
  404.      margin-right: -3px;
  405.      text-align: right;
  406.      padding: 5px;
  407. }
  408.  
  409. .article h3 a {
  410.     color: black;
  411.     padding: 3px;
  412. }
  413.  
  414. .article h3 a:hover, .article a:focus, .article a:active {
  415.     border-bottom: 1px solid rgb(199, 143, 72);
  416.     border-left: 1px solid rgb(191, 150, 97);
  417.     border-right: 1px solid rgb(191, 129, 52);
  418.     border-top: 1px solid rgb(161, 118, 62);
  419.     background: rgb(255, 166, 55) url(current_page_bkgd.jpg) no-repeat;
  420.     padding: 2px;
  421.     color: white;
  422.     text-decoration: none;
  423.     text-shadow: 0px -1px 1px rgb(161, 161, 161);
  424. }
  425.  
  426.  
  427. .article img {
  428.     border: none;
  429. }
  430.  
  431. .article img.narrow {
  432.     float: left;
  433.     margin-right: 10px;
  434.     margin-bottom: 10px;
  435. }
  436.  
  437. .article-thumbnail {
  438.     float: left;
  439.     margin-right: 10px;
  440.     margin-bottom: 10px;
  441. }
  442.  
  443. .callout {
  444.     background: url(background_no_sidebar.jpg) -2px;
  445.     float: right;
  446.     margin: 0px -3px 10px 10px;
  447.     padding: 10px;
  448.     border: 1px solid rgb(158, 158, 158);
  449.     text-align: center;
  450. }
  451.  
  452. .callout p {
  453.     text-align: left;
  454. }
  455.  
  456. .callout h4 {
  457.     font-weight: normal !important;
  458.     font-size: 1.25em !important;
  459. }
  460.  
  461. #page-bottom {
  462.     background: url(footer.jpg) center top no-repeat;
  463.     height: 59px;
  464.     overflow: hidden;
  465.     padding-top:6px;
  466.     text-align: center;
  467.     font-size: 1.3em;
  468.     text-shadow: 0px -1px 1px rgb(161, 161, 161);
  469.     color: white;
  470. }
  471.  
  472. #page-bottom div {
  473.     height:23px;
  474.     overflow:hidden;
  475. }
  476.  
  477. #page-bottom p {
  478.     display:inline;
  479. }
  480.  
  481. #page-bottom p+p:before {
  482.     content:' \002022  ';
  483. }
  484.  
  485. div.photo-viewer-summary .article {
  486.     margin: auto;
  487. }
  488.  
  489. .HTMLElement {
  490.     margin-bottom: 10px;
  491. }
  492.  
  493. .ImageElement, .VideoElement {
  494.     text-align: center;
  495. }
  496.  
  497. .caption {
  498.     padding: 10px;
  499.     font-size: 1.5em;
  500. }
  501.  
  502. /* Used on Photo Grid Pages ... */
  503. .photogrid-index {
  504.     text-align: center;
  505.     background: url(background_no_sidebar.jpg) -2px;
  506.     margin: 10px;
  507.     margin-left: 8px;
  508.     padding: 5px;
  509.     border: 1px solid rgb(158, 158, 158);
  510.     overflow: auto;
  511.     width: 465px;
  512. }
  513.  
  514. body.no-sidebar .photogrid-index {
  515.     width:618px;
  516.     margin-left:37px;
  517. }
  518.  
  519. .photogrid-index a {
  520.     color:#000;
  521.     text-decoration:none;
  522.     border:none!important;
  523.     padding:0px!important;
  524. }
  525.  
  526. .photogrid-index a:hover  {
  527.     text-decoration:underline;
  528. }
  529.  
  530. .gridItem {
  531.     float: left;
  532.     position:relative;
  533.     width:140px;
  534.     height:180px;    /* room for caption */
  535.     margin: 6px;
  536.     padding-top: 10px;
  537.     border: 1px solid rgb(158, 158, 158);
  538.     background: rgb(225, 225, 225) url(other_title.jpg) repeat-x bottom;
  539.     overflow: hidden;
  540. }
  541.  
  542. .gridItem h3 {
  543.     font-size: 1.1em;
  544.     font-weight:normal;
  545.     color: black;
  546.     margin-top: 2px;
  547.     margin-left: 4px;
  548.     margin-right: 4px;
  549.     text-shadow: 0px 1px 1px white;
  550.     position:absolute;
  551.     top: 138px; /* needs to leave 38px from the bottom of the gridItem¬†*/
  552.     width: 132px;
  553. }
  554.  
  555.  
  556. .gridItem img {
  557.     border: 1px solid rgb(80, 80, 80);
  558.     margin: auto;
  559.     display:block;
  560.     position: absolute;
  561.     top: 0;
  562.     bottom: 42px;
  563.     right: 0;
  564.     left: 0;
  565. }
  566.  
  567.  
  568. * html .photogrid-index {
  569.     overflow:visible;
  570.     margin:10px 0px;
  571. }
  572. * html .gridItem img {
  573.     position: relative;
  574.     top:0px;
  575. }
  576.  
  577. * html .gridItem h3 {
  578.     position: relative;
  579.     top: 0px;
  580. }
  581.  
  582.  
  583.  
  584. /* Used on index summary pages */
  585. .listing-index #main li h3 a {
  586.     text-decoration:none;
  587.     font-size:1em;
  588.     font-weight:normal;
  589. }
  590.  
  591. /* Individual Photo Pages */
  592.  
  593. .photo-navigation {
  594.     position: relative;
  595.     z-index: 100;
  596.     height: 75px;
  597. }
  598.  
  599. .photo-navigation div {
  600.     text-indent: -5000em;
  601.     width: 94px;
  602.     height: 83px;
  603.     position: absolute;
  604.     margin-top: -10px;
  605. }
  606.  
  607. .photo-navigation a {
  608.     width:100%;
  609.     height:100%;
  610.     display:block;
  611.     background:none;
  612. }
  613.  
  614. .photo-navigation a:active, .photo-navigation a:hover, .photo-navigation a:focus {
  615.     border: none;
  616.     padding: 0px;
  617. }
  618.  
  619. #previous-photo    {
  620.     background: url(photo-buttons-disabled.jpg)    no-repeat;
  621.     left: 236px;
  622. }
  623. .allow-sidebar #previous-photo {left:12px;}
  624. #previous-photo a {background: url(photo-buttons.jpg) no-repeat;}
  625.  
  626. #next-photo {
  627.     width: 95px;
  628.     background: url(photo-buttons-disabled-03.jpg) no-repeat;
  629.     left: 405px;
  630. }
  631. .allow-sidebar #next-photo {left:181px;}
  632. #next-photo a {background: url(photo-buttons-03.jpg) no-repeat;}
  633.  
  634. #photo-list {
  635.     width: 75px;
  636.     background: url(photo-buttons-disabled-02.jpg) no-repeat;
  637.     left: 330px;
  638. }
  639. .allow-sidebar #photo-list {left: 106px;}
  640. #photo-list a {background: url(photo-buttons-02.jpg) no-repeat;}
  641.  
  642. .image-controls a:hover, .image-controls a:active, .image-controls a:focus {
  643.     border:none;
  644.     padding:0px;
  645.     background:transparent;
  646. }
  647.  
  648. /* IE 5/5.5 Hackery */
  649.  
  650. @media tty {
  651. i{content:"\";/*" "*/}} @import 'ie.css'; /*";}
  652. }/* */
  653.  
  654. /* IE:Mac Hackery */
  655.  
  656. /*\*//*/
  657.  
  658. body.allow-sidebar #main {
  659.     float: right;
  660.     width: 491px;
  661.     font-size: 1em;
  662. }
  663.  
  664. .article {
  665.     margin:0;
  666.     background: none;
  667.     border: none;
  668.     padding-bottom: 0;
  669.     padding-top: 0;
  670. }
  671.  
  672. #sitemenu {
  673.     margin-top: 0px;
  674. }
  675.  
  676. #sitemenu-content ul {
  677.     margin: 0px;
  678. }
  679.  
  680. .article p {
  681.     clear: none;
  682. }
  683.  
  684. .article a {
  685.     text-decoration: underline;
  686.     border-bottom: none;
  687. }
  688.  
  689. .article a:hover, .article a:focus, .article a:active {
  690.     border-bottom: none;
  691.     color: blue;
  692. }
  693.  
  694. .article-summary {
  695.     padding: 0;
  696.     margin: 0;
  697.     clear: none;
  698. }
  699.  
  700. .callout {
  701.     width:220px;
  702. }
  703.  
  704. #page-bottom p {
  705.     margin-top: 0;
  706. }
  707.  
  708. /**/
  709.